<template>
  <MyChart class="chartsBox" :loading="loading" :options="options" :dataEmptyFlag="dataEmptyFlag"
    @echartsClick="echartsClick"></MyChart>
</template>
<script setup name="EchartsBar">
import { ref, watch, onMounted } from 'vue';
import MyChart from "@/components/MyCharts/index.vue";
import * as echarts from "echarts";
const loading = ref(false);
const dataEmptyFlag = ref(false);
const emit = defineEmits(["echartsClick"]);
const props = defineProps({
  height: {
    type: String,
    default: "100%",
  },
  width: {
    type: String,
    default: "100%",
  },
  xData: {
    type: Object,
    default: function () {
      return {};
    },
  },
  dataList: {
    type: Array,
    default: function () {
      return [
        // {
        //   "name": "济南热电集团“大培训 大学习 大考试”2-有限空间考试",
        //   "value": 100
        // },
        // {
        //   "name": "和信热力分公司安全生产奖惩及举报奖励制度考试试题",
        //   "value": 100
        // },
        // {
        //   "name": "和信热力分公司安全生产奖惩及举报奖励制度考试试题（补录）",
        //   "value": 100
        // },
        // {
        //   "name": "信息安全行为规范考试题-智慧能源事业部",
        //   "value": 4.44
        // },
        // {
        //   "name": "北郊分公司2024年6月职业健康宣传教育考试",
        //   "value": 15
        // },
        // {
        //   "name": "测试随机组卷z1",
        //   "value": 0
        // }
      ];
    },
  },
});
watch(() => props.dataList, (list) => {
  loadECharts();
});
const barOption = ref({
  bar1Top: "#2A8CF0",
  bar1Side: "#2A8CF0",
  bar1Bottom: "#15418C",
  bar2Top: "#44E6E6",
  bar2Side: "#44E6E6",
  linePoint: "#FFD15C",

});
const options = ref();
const fetchData = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        yData: [150, 230, 224, 218, 135, 147, 260],
      });
    }, 1000);
  });

const baseOption = {
  backgroundColor: "#00000000",

  textStyle: {
    color: "#C9C9C9",
  },
  tooltip: {
    // trigger: 'axis',
    // axisPointer: {
    //   type: 'none',
    // },
    // formatter: function (params) {
    //   return params[0].name + ' : ' + params[0].value;
    // },
    trigger: "axis",
    borderColor: "rgba(255,255,255,.3)",
    backgroundColor: "rgba(13,5,30,.6)",
    textStyle: {
      color: "white", //设置文字颜色
    },
    borderWidth: 1,
    padding: 5,
    formatter: '{b}:{c}%'
  },
  grid: {
    left: 10,
    right: 10,
    bottom: 0,
    top: 0,
    containLabel: true
  },
  xAxis: {
    show: false,
    type: 'value',
    max: 100,
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLabel: {
        show: true,
        // align: 'left',
        textStyle: {
          color: '#ffffff',

        },
        formatter: function (value) {
          let valueTxt = '';
          if (value.length > 25) {
            valueTxt = value.substring(0, 24) + '...';
          }
          else {
            valueTxt = value;
          }
          return `{name|${valueTxt}}`;
        },
        rich: {
          name: {
            width: 25 * 14,
            align: 'left',
            fontSize: 14,
            color: '#ffffff'
          },

        }
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: []// salvProName,
    },
    {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true, // 显示右侧的文字
      axisLabel: {
        formatter: '{value}%',
        textStyle: {
          color: '#16f5ff',
          fontSize: '12',
        },
      },
      data: []//salvProValue,
    },
  ],
  series: [],
};

const loadECharts = () => {
  if (!props.dataList || props.dataList.length == 0) {
    dataEmptyFlag.value = true
  } else {
    dataEmptyFlag.value = false
  }
  let xData = props.dataList.map((item) => {
    return item.name;
  });
  let yData = props.dataList.map((item) => {
    return item.value;
  });

  let maxArr = []
  props.dataList.map((item) => {
    maxArr.push(100);
  })


  baseOption.yAxis[0].data = xData
  baseOption.yAxis[1].data = yData
  baseOption.series = [{
    name: '值',
    type: 'bar',
    zlevel: 1,
    itemStyle: {
      normal: {
        barBorderRadius: 30,
        color: '#069dfd',
      },
    },
    barWidth: 25,
    data: props.dataList
  },
  {
    name: '背景',
    type: 'bar',
    barWidth: 25,
    barGap: '-100%',
    data: maxArr,
    itemStyle: {
      normal: {
        color: '#0a337e',
        barBorderRadius: 30,
      }
    },
  },
  ];
  options.value = { ...baseOption };
};
function echartsClick(params) {
  emit("echartsClick", params);
}

onMounted(loadECharts);
</script>
<style lang="scss" scoped>
.chartsBox {
  overflow: hidden;
}

/*懒加载图标动画*/
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*弹窗样式*/
.layer {
  position: absolute;
  left: 400px;
  top: 300px;
  z-index: 100;
  width: 360px;
  height: 280px;
  background: rgba(10, 22, 64, 0.9);
  border-radius: 5px;
  border: 1px solid #122253;
  transform: translate(-100%, -100%);

  .content {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;

    p {
      font-size: 20px;
      color: #fff;
      line-height: 50px;
    }

    .col-item {
      height: 41px;
      margin-top: 20px;
      border-right: 1px solid #172353;

      .num {
        color: #ebf8ff;
        font-size: 18px;
      }

      .text {
        color: #507ebc;
        font-size: 12px;
      }
    }
  }

  .content::after {
    content: "";
    width: 120px;
    height: 2px;
    background: #ffccff;
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
  }

  .content::before {
    content: "";
    width: 2px;
    height: 80px;
    background: #ffb800;
    position: absolute;
    right: -134px;
    top: 136px;
    transform: rotateZ(-20deg);
  }
}
</style>
